<div class="bar module-bar" ng-controller="NavCtrl">
	<a href="" class="left">{{moduleName}}</a>

	<div class="right">
		<a href="" class="prev-page" ng-click="prevPage()">&lt;</a>
		<span>{{currentPage()+1}}</span>
		<a href="" class="next-page" ng-click="nextPage()">&gt;</a>

		<a href="" class="toc-toggle" toggle="#toc">TOC</a>
		<div id="toc">
			<a href="" ng-repeat="p in pages" ng-click="gotoPage($index)" ng-class="{active: $index==currentPage()}">{{$index+1}}. {{p.Title}}</a>
		</div>
	</div>
</div>

<div id="editor-container">
	<div class="relative-content">
		<div id="left-side">
			<div id="explorer" ng-class="{hidden: page.Files.length==0}">
				<a class="menu-button" ng-repeat="f in page.Files" ng-click="openFile(f)" ng-class="{active: f==file}">{{f.Name}}</a>
			</div>

			<div class="relative-content" ng-class="{hidden: page.Files.length==0}">

				<div id="top-part">
					<div class="relative-content">
						<div id="file-editor">
							<textarea ui-codemirror ng-model="file.Content" id="file-editor"></textarea>
						</div>

					</div>
				</div>

				<div horizontal-slide top="#top-part" bottom="#bottom-part"></div>

				<div id="bottom-part">
					<div class="relative-content">
						<div id="file-menu">
							<a class="menu-button" id="run" ng-click="run()">Run</a>
							<a class="menu-button" id="format" ng-click="format()">Format</a>
						</div>

						<div class="output" ng-repeat="f in page.Files" ng-class="{active: f==file}" ng-bind-html-unsafe="f.Output">
						</div>
					</div>
				</div>
			</div>
		</div>

		<div vertical-slide left="#left-side" right="#right-side"></div>

		<div id="right-side"
			ng-controller="NavCtrl"
			autofocus onpageup="prevPage()" onpagedown="nextPage()"
			ng-bind-html-unsafe="page.Content">
		</div>

	</div>
</div>

</div>
